<template>
    <div class="box" itany="网博">
        <h3>全局样式和局部样式</h3>
        <p>1.全局样式定义【所有组件中的标签都会加载该样式】</p>
        <ul>
            <li>
                以独立样式文件定义样式，并在main.js(启动引导文件)中进行加载
                <img src="@/index/assets/21.png" alt="" srcset="">
            </li>
            <li>
                在任意组件中以模块化语法进行的样式导入【不要在开发中使用】
                <img src="@/index/assets/22.png" alt="" srcset="">
            </li>
            <li>
                在任意.vue文件中 以无scoped描述的style标签 中定义的样式
                <img src="@/index/assets/23.png" alt="" srcset="">
            </li>
        </ul>
        <p>2.局部样式定义【.vue组件文件中定义的样式只对当前文件的标签生效】</p>
        <ul>
            <li>
                .vue文件的style标签增加 scoped 属性
                <img src="@/index/assets/24.png" alt="" srcset="">
                <ol>
                    <li>.vue文件的style标签增加scoped属性后，
                        vue-loader在加载文件时会使用hash编码方式生成唯一hasCode值
                       【不同文件hashCode值不一样】
                    </li>
                    <li>.vue文件中style标签一旦增加scoped的属性，当前文件的所有标签都会被补充一个data-v-hasCode的属性值
                        <img src="@/index/assets/26.png" alt="" srcset="" style="width: 700px;">
                    </li>
                    <li>.vue文件中增加了scoped的属性的style内部的所有样式，都会在css选择器末尾增加一个[data-v-hasCode]属性选择器
                        <img src="@/index/assets/25.png" alt="" srcset="">
                    </li>
                </ol>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    
}
</script>

<!-- <style>
h3{
    background-color: #dedede;
}
</style> -->
<style scoped>
h3{
    background-color: #dedede;
}
</style>